<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <title>Brownie - 4 Columns Portfolio</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index,follow" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<link rel="stylesheet" href="css/ie_7.css" type="text/css" />
<![endif]-->
     <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="js/all-in-one.js"></script>
    <script type="text/javascript" src="js/setup.js"></script>
    <script type="text/javascript" src="js/portfolio-filter.js"></script>
<script type="text/javascript">
$(window).load(function(){
	$('#demo-side-bar').removeAttr('style');
});
</script>
<style type="text/css">
.demobar{display:none;}
#demo-side-bar{top:53px!important;left:90%!important;display:block!important;}
</style>
 <!--Dynamically creates ads markup-->
   <?php include("http://www.egrappler.com/ads-header.php"); ?>
    <!-- Header -->
    <header class="header_bg clearfix">
		<div class="container clearfix">
        	<!-- Social -->
            	<ul class="social-links">
                	<li ><a href="javascript:"><img src="images/facebook.png" alt="Facebook"></a></li>
                    <li ><a href="javascript:"><img src="images/twitter.png" width="24" height="24" alt="Twitter"></a></li>
                </ul>
            <!-- /Social -->
			 <!-- Logo -->
			<div class="logo">
				<a href="index.html"><img src="images/logo.png" alt="" /></a>
			</div>
			 <!-- /Logo -->
			
			<!-- Master Nav -->
			<nav class="main-menu">
				<ul>
					<li><a href="index.html">Home</a></li>
					<li>
						<a>Pages</a>
						<ul>
							<li><a href="elements.html">Elements</a></li>
							<li><a href="typography.html">Typography</a></li>
							<li><a href="blog_single.html">Blog Single Post</a></li>
							
							<li><a href="javascript:">Pricing</a>
								<ul>
									<li><a href="pricing_2_cols.html">Pricing 2 Cols</a></li>
                                    <li><a href="pricing_3_cols.html">Pricing 3 Cols</a></li>
                                    <li><a href="pricing_4_cols.html">Pricing 4 Cols</a></li>
                                    <li><a href="pricing_5_cols.html">Pricing 5 Cols</a></li>
									
								</ul>
							</li>
                            
                            <li><a href="full_width.html">Full Width</a></li>
<li><a href="404.html">404 Page</a></li>
						</ul>
					</li>
					<li><a>Portfolio</a>
						<ul>
							<li><a href="portfolio_2_cols.html">Portfolio 2 Cols</a></li>
							<li><a href="portfolio_3_cols.html">Portfolio 3 Cols</a></li>
							<li><a href="portfolio_4_cols.html">Portfolio 4 Cols</a></li>
							<li><a href="portfolio_details.html">Portfolio Details</a></li>
						</ul>
					</li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</nav>
			<!-- /Master Nav -->
		</div>
</header>
    <!-- /Header -->
    <!-- START CONTENT -->
    <section class="container clearfix">
		<!-- Page Title -->
			<header class="container page_info clearfix">
				
					<h1 class="regular brown bottom_line">4 Columns Portfolio</h1>
				
				<div class="clear"></div>
			</header>
			
		<!-- /Page Title -->
		
		
		<div class="container">
			<!-- CATEGORY FILTER -->
			<div class="filter">
				<ul>
					<li><a href="javascript:void(0);" id="all" class="selected">Everything</a></li>
					
					<li><a href="javascript:void(0);" id="app">Free Goodies</a></li>
					
					<li><a href="javascript:void(0);" id="util">WordPress Themes</a></li>
               
				</ul>
			</div>
			<!-- END CATEGORY FILTER -->
		</div>
		
		<div class="clear padding20"></div>
		
		
		<div class="portfolio_1_4">
			<ul id="list">
				<!-- START PORTFOLIO COLUMN #1 -->
				<li id="id-1" class="app">
					<span class="image">
						<a href="images/portfolio_image_1.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_1.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #1 -->
				
				<!-- START PORTFOLIO COLUMN #2 -->
				<li id="id-2" class="util">
					<span class="image">
						<a href="images/portfolio_image_2.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_2.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #2 -->
				
				<!-- START PORTFOLIO COLUMN #3 -->
				<li id="id-3" class="app">
					<span class="image">
						<a href="images/portfolio_image_3.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_3.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #3 -->
				
				<!-- START PORTFOLIO COLUMN #4 -->
				<li id="id-4" class="util">
					<span class="image">
						<a href="images/portfolio_image_4.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_4.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #4 -->
				
				<!-- START PORTFOLIO COLUMN #5 -->
				<li id="id-5" class="app">
					<span class="image">
						<a href="images/portfolio_image_5.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_5.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #5 -->
				
				<!-- START PORTFOLIO COLUMN #6 -->
				<li id="id-6" class="util">
					<span class="image">
						<a href="images/portfolio_image_6.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_6.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #6 -->
				
				<!-- START PORTFOLIO COLUMN #7 -->
				<li id="id-7" class="util">
					<span class="image">
						<a href="images/portfolio_image_7.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_7.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #7 -->
				
				<!-- START PORTFOLIO COLUMN #8 -->
				<li id="id-8" class="app">
					<span class="image">
						<a href="images/portfolio_image_8.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_8.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #8 -->
				
				<!-- START PORTFOLIO COLUMN #9 -->
				<li id="id-9" class="util">
					<span class="image">
						<a href="images/portfolio_image_9.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_9.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #9 -->
				
				<!-- START PORTFOLIO COLUMN #10 -->
				<li id="id-10" class="app">
					<span class="image">
						<a href="images/portfolio_image_10.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_10.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #10 -->
				
				<!-- START PORTFOLIO COLUMN #11 -->
				<li id="id-11" class="util">
					<span class="image">
						<a href="images/portfolio_image_11.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_11.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #11 -->
				
				<!-- START PORTFOLIO COLUMN #12 -->
				<li id="id-12" class="app">
					<span class="image">
						<a href="images/portfolio_image_12.jpg" data-rel="prettyPhoto" class="img-thumb"><img class="portfolio_image" src="images/portfolio_image_12.jpg" alt="" /></a>
					</span>
					<span class="title"><a href="portfolio_single.html">The standard Lorem Ipsum</a></span>
					<span class="description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					</span>
					<span class="clear padding15"></span>
				</li>
				<!-- END PORTFOLIO COLUMN #12 -->
			</ul>
			<div class="clear"></div>
		</div>
	</section>
    <!-- END CONTENT -->
    <!-- footer -->
    <footer class="footer_bg_bottom clearfix">
		<div class="footer_bottom container">
			<div class="col_2_3">
				
				<div class="menu">
					<ul>
						<li><a href="index.html">Home</a></li>
                        <li><a href="elements.html">Elements</a></li>
						<li><a href="portfolio_4_cols.html">Portfolio</a></li>
						<li><a href="pricing_5_cols.html">Pricing</a></li>
						<li><a href="blog.html">Blog</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div>
				
				<div class="clear padding20"></div>
				
				
				<p>
					&copy; Some Rights Reserved. &nbsp; <a href="#">Legal Notices</a>  
				</p>
				
			</div>
			
			<div class="clear padding20"></div>
		</div>
	</footer>
    <!-- /footer -->
	<div id="demo-side-bar">
   <?php include("http://www.egrappler.com/ad-sidebar.php");?>
   </div>
    </div>
    <!--wrapper end-->
	<!--Dynamically creates analytics markup-->
	 <?php include("http://www.egrappler.com/analytics.php");?>
</body>
</html>
